// import React, {useState} from 'react';
// import CryptoJS from 'crypto-js';
//
// function App() {
//   const [inputText, setInputText] = useState('');
//   const [outputText, setOutputText] = useState('');
//   const [test, setTest] = useState('');
//   const [key, setKey] = useState('');
//   const [iv, setIv] = useState('');
//
//   // 生成16进制秘钥和IV
//   const generateKeyAndIV = () => {
//     const key = CryptoJS.lib.WordArray.random(16).toString();
//     const iv = CryptoJS.lib.WordArray.random(16).toString();
//     setKey(key);
//     setIv(iv);
//   }
//
//   // 加密
//   const encrypt = () => {
//     const ciphertext = CryptoJS.AES.encrypt(inputText, CryptoJS.enc.Hex.parse(key), {iv: CryptoJS.enc.Hex.parse(iv)});
//     setOutputText(ciphertext.toString());
//   }
//
//   // 解密
//   const decrypt = () => {
//     const bytes = CryptoJS.AES.decrypt(outputText, CryptoJS.enc.Hex.parse(key), {iv: CryptoJS.enc.Hex.parse(iv)});
//     const plaintext = bytes.toString(CryptoJS.enc.Utf8);
//
//     setInputText(plaintext);
//   }
//  const decrypt2 = () => {
//     const bytes = CryptoJS.AES.decrypt(test, CryptoJS.enc.Hex.parse(key), {iv: CryptoJS.enc.Hex.parse(iv)});
//     const plaintext = bytes.toString(CryptoJS.enc.Utf8);
//     setInputText(plaintext);
//   }
//
//   return (
//     <div>
//       <h1>AES加密解密示例</h1>
//       <div>
//         <label>输入明文：</label>
//         <input type="text" value={inputText} onChange={(e) => setInputText(e.target.value)}/>
//       </div>
//       <div>
//         <button onClick={generateKeyAndIV}>生成秘钥和IV</button>
//       </div>
//       <div>
//         <label>秘钥：</label>
//         <input type="text" value={key} readOnly/>
//       </div>
//       <div>
//         <label>IV：</label>
//         <input type="text" value={iv} readOnly/>
//       </div>
//       <div>
//         <button onClick={encrypt}>加密</button>
//         <button onClick={decrypt}>解密</button>
//         <button onClick={decrypt2}>解密2222</button>
//       </div>
//
//       <div>
//         <label>输出密文：</label>
//         <input type="text" value={outputText} onChange={(e) => setOutputText(e.target.value)}/>
//       </div>
//       <div>
//         <label>解密秘闻：</label>
//         <input type="text" value={test} onChange={(e) => setTest(e.target.value)}/>
//       </div>
//       <div>
//         <label>输出明文：</label>
//         <input type="text" value={inputText} readOnly/>
//       </div>
//     </div>
//   );
// }
//
// export default App;
